<template>
  <el-card class="dashboard-card">
    <div slot="header">
      <h2>管理面板</h2>
    </div>

    <div class="dashboard-stats">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="stat-card">
            <div class="stat-title">总用户数</div>
            <div class="stat-value">{{ userCount }}</div>
            <div class="stat-desc">较上月增长 {{ userGrowth }}%</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="stat-card">
            <div class="stat-title">总博客数</div>
            <div class="stat-value">{{ blogCount }}</div>
            <div class="stat-desc">较上月增长 {{ blogGrowth }}%</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="stat-card">
            <div class="stat-title">本月新增</div>
            <div class="stat-value">{{ newThisMonth }}</div>
            <div class="stat-desc">博客数量</div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="recent-activity">
      <h3>最近博客</h3>
      <el-table
        :data="recentBlogs"
        border
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column
          prop="username"
          label="作者"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="created_at"
          label="发布时间"
          width="200"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" width="150" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="viewBlog(scope.row)"
              icon="el-icon-view"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        userCount: 0,
        blogCount: 0,
        newThisMonth: 0,
        userGrowth: 0,
        blogGrowth: 0,
        recentBlogs: [],
      };
    },
    created() {
      this.loadDashboardData();
    },
    methods: {
      viewBlog(row) {
        // console.log("row,", row);
        this.$router.push(`/blog/${row.id}`);
      },
      async loadDashboardData() {
        try {
          // 获取统计数据
          const stats = await this.$axios.get("/admin/stats");

          this.userCount = stats.data.userCount;
          this.blogCount = stats.data.blogCount;
          this.newThisMonth = stats.data.newThisMonth;
          this.userGrowth = stats.data.userGrowth;
          this.blogGrowth = stats.data.blogGrowth;

          // 获取最近博客
          let blogs = await this.$axios.get("/blogs?page=1&pageSize=5");
          this.recentBlogs = blogs.data.data;
        } catch (error) {
          this.$message.error("加载面板数据失败");
          console.error(error);
        }
      },
    },
  };
</script>

<style scoped>
  .dashboard-card {
    max-width: 1200px;
    margin: 20px auto;
  }

  .dashboard-stats {
    margin-bottom: 30px;
  }

  .stat-card {
    text-align: center;
    padding: 20px 0;
    background-color: #f9f9f9;
  }

  .stat-title {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
  }

  .stat-value {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
  }

  .stat-desc {
    font-size: 14px;
    color: #409eff;
  }

  .recent-activity {
    margin-top: 20px;
  }

  .recent-activity h3 {
    margin-bottom: 10px;
    color: #333;
  }
  .el-table ::v-deep table {
    width: 100% !important;
  }
</style>
